<template>
    <div>
        <Head></Head>
        <Nav></Nav>
        <div class="page" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)"
         :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }">
        <div v-show="touching" class="has-text-centered">下拉松开刷新</div>
        <Item v-for="item in page.data" :key="item.title" :ask="item"></Item>
        <div v-show="loadMoreing" class="has-text-centered">正在加载</div>
        </div>
    </div>
</template>
<script>
import Head from './components/AskPageHead.vue';
import Nav from './components/AskPageNav.vue';
import Item from './components/AskPageItem.vue';

export default {
    name:"AskPageList",
    data:function(){
      //mock一下数据
    let data = [];
    for(let i = 0;i < 30;i++){
        data.push({
          title:"淘宝上有那些奇葩的买家秀？"+i,
          content:"淘宝逛多了总是能看到很多卖家看了会流泪，买家看了会沉默，网友看了会消除猪叫声的奇葩...",
          author:"松鼠识惠",
          like:3266+i,
          comment: 71
      });
      data.push({
          title:"你在电影院遇到过哪些奇葩的事情？"+i,
          content:"我和男朋友看电影，电影看了十多分钟，突然进来一对情侣，摸着黑找到我俩面前。“美女，你是不是...",
          author:"栗栗酥",
          like:293+i,
          comment:442
      });
    }
    return{
            data:data,
            page:{
                totalCount:0,
                totalPageNum:0,
                pageSize:10,
                pageNum:1,
                data:[]
                },
                //是否正在加载数据状态
                loadding:false,
                //正在加载中状态
                loadMoreing:true,

                isDown:false,

                top:0,
                //保存y轴点位置
                startY:0,
                //下拉开关，当点击并下拉时即触发刷新事件
                touching:false
            }
    },
    components:{
        Head,
        Nav,
        Item
    },
    mounted:function(){
            //计算总记录数
            this.page.totalCount = this.data.length;
            let totalCount = this.page.totalCount;
            //计算总页数
            let temp = totalCount % this.page.pageSize;
            let pageNum = parseInt(totalCount/this.page.pageSize);
            if(temp>0){
                pageNum++;
            }else if(temp<0){
                pageNum = 1;
            }
            this.page.totalPageNum = pageNum;
            this.getAddPageData();
            //监听事件
            window.addEventListener("scroll",this.scrollFn);
        },
    methods:{
        scrollFn:function(){
            //真实内容的高度
            let pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
            //视窗的高度
            let viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
            //隐藏的高度
            let scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            //偏移量
            let pos = pageHeight-viewportHeight-scrollHeight;
            if(pos < 20){
                //满足条件执行
                this.nextPage();
            }
        },
        nextPage:function(){
            //判断是否为最后一页
            if(this.page.pageNum === this.page.totalPageNum){
                this.loadMoreing = false;
                return;
            }
            //判断是否正在加载数据
            if(this.loadding){
                return
            }
            //开始加载数据
            this.loadding = true;
            this.page.pageNum++;
            setTimeout(() =>{
                this.getAddPageData();
                this.loadding = false;
            },1000);           
        },
        getAddPageData:function(){
            //计算当前数据起始值
            let star = this.page.pageSize*(this.page.pageNum - 1);
            let end = star + this.page.pageSize;
            if(end>this.page.totalCount){
                end = this.page.totalCount;
            }
            const curPageData = this.data.slice(star,end);
            //获取当前页数数据
            this.page.data = this.page.data.concat(curPageData);
        },
        touchStart(e) {
        //e代表该事件对象，e.targetTouches[0].pageY可以拿到手指按下的 y轴点
        this.startY = e.targetTouches[0].pageY
        //判断触摸事件是否是在页面的顶部可触发刷新事件的区域
        if (this.startY>450){
          return
        }
        // 开启下拉刷新状态
        this.touching = true

        },
        touchMove(e) {
        /*  
            这个 touchMove，只要页面在动都会发生的，所以 touching就起作用了
            如果 touching为false，说明这个正在移动的页面不是我们想要的下拉刷新，有可能是用户随意拉了一下页面而已，或者其他
        */
        if(!this.touching)
          return
        // 获取移动的距离
        let diff = e.targetTouches[0].pageY - this.startY
        //判断是向上拉还是向下拉
        if(diff >0) {
          e.preventDefault()
        } else {
          return
        }
        //这个this.top要对应绑定到该元素的transform: translateY(+top+ 'px')上，不然是无法拉动的
        this.top = Math.floor(diff*0.25) + (this.state === 2 ? 20 : 0)
        if(this.top >= 20){
          this.state = 1  //代表正在拉取
        } else {
          this.state = 0 // 代表初始转态
        }
      },
    touchEnd() {
            this.touching = false
                if(this.state === 2) {
                this.top = 20
                return
                }
            //判断抬起时的高度，是大于20 就开启刷新
                if(this.top >= 20) {
                this.refresh()
                } else {
                this.state = 0
                this.top = 0
                }
        },
    refresh() {
        this.state = 2
        this.top = 20
        setTimeout(()=>{
          this.page.data=this.page.data.reverse()
          this.state = 0
          this.top = 0
          //下拉刷新后，对数据还原，获取第一页数据，重新注册滚轮事件
        },1000)
      },
    }
}
</script>
<style scoped>
</style>
